<template>
	<view class="setting setting-index" style="width: 750rpx;position: relative;">
		<!-- 已购设备产品 -->
		<view class="title">
			已购设备
		</view>
		<view class="buy-device" style="position: relative; box-sizing: border-box; width: 700rpx;height: 80px;margin: 0 auto;">
			<view class="buy-device-body position-center" style="box-sizing: border-box; 
													width: 700rpx; background-color: #eee;
													height: 60px; border-radius: 5px;
													box-shadow: 0 0 10px 0 #eee;">
				<view class="buy-device-select position-center"
					  style="width: 600rpx;
							 font-size: 20px;background-color: white;">
					<uni-data-select
						v-model="deviceChoseValue"
						:localdata="deviceList"
						@change="deviceChange"
						placeholder="请选择设备"
						emptyTips="暂无设备"
						:clear="false"
					></uni-data-select>
				</view>
			</view>
		</view>
		<view class="device-status"
			  style="width: 700rpx;height: 80px;background-color: #ccc;
					 border-radius: 10px;margin: 0 auto;
					 box-shadow: inset 0 0 10px 0 #aaa;
					 display: flex;justify-content: space-around;
					 align-items: center;flex-direction: column;">
			<view class="is-online device-status-item">
				是否在线: 
				<text :class="{'isOnline': 1==1, 
							   'online': choseDeviceData.isOnline==1, 
							   'unline': choseDeviceData.isOnline==0}">
					{{choseDeviceData.isOnline?choseDeviceData.isOnline==1?'在线':'离线':'未知'}}
				</text>
			</view>
			<view class="last-hearttime device-status-item">
				最后心跳时间: 
				<text :class="{'have-time': choseDeviceData.lastHearttime, 
							   'no-time': 1==1}">
					{{choseDeviceData.lastHearttime?choseDeviceData.lastHearttime:'未知'}}
				</text>
			</view>
		</view>
		<view class="status">
			<view class="audioswitch" style="display: flex;">
				<view style="font-weight: bold;">
					音频开关
				</view>
				<view style="margin-left: 10px;">
					<switch :checked="audioswitch==1" @change="audioswitchChange" />
				</view>
			</view>
			<view class="brightness status-body">
				<view class="label">
					亮度
				</view>
				<view class="progress-out">
					<progress :percent="brightness"
							  border-radius="10"
							  stroke-width="6"
							  activeColor="skyblue"/>
				</view>
				<uni-number-box 
					@change="numsChange" 
					v-model="brightness">
				</uni-number-box>
			</view>
			<view class="volume status-body">
				<view class="label">
					音量
				</view>
				<view class="progress-out">
					<progress :percent="volume"
							   border-radius="10"
							   stroke-width="6"
							   activeColor="skyblue"/>
				</view>
				<uni-number-box 
					@change="numsChange" 
					v-model="volume">
				</uni-number-box>
			</view>
		</view>
		<view class="submit" @click="syncSetting"
			  style="width: 700rpx;height: 40px;
					 background-color: royalblue;
					 border-radius: 10px;margin: 0 auto;
					 text-align: center;line-height: 40px;
					 font-weight: bold;">
			同步
		</view>
	</view>
</template>

<script>
	import { BASE_IMAGE_URL, GET_USER_INFO } from '../../../utils/CommonValues.js';
	import request from '../../../utils/request.js';
	export default {
		data() {
			return {
				brightness: 0, // 音量的大小
				volume: 0, // 亮度的大小
				audioswitch: 0, // 音频开关
				userInfo: {},
				choseDeviceData: {},
				deviceChoseValue: '',
				deviceList: [
					{value: 1, text:'张三1'}
				],
			}
		},
		onLoad() {
			this.baseUrl = BASE_IMAGE_URL;
			GET_USER_INFO().then(res => {
				this.userInfo = res;
				this.getDeviceno();
			})
		},
		methods: {
			audioswitchChange(e) {
				console.log(+e.target.value, "状态修改")
				this.audioswitch = +e.target.value;
			},
			syncSetting() {
				console.log(this.deviceList)
				if(!this.deviceChoseValue) {
					uni.showToast({
						title: '请先选择设备',
						icon: 'none'
					})
					return;
				}
				this.choseDeviceData.brightness = this.brightness;
				this.choseDeviceData.volume = this.volume;
				this.choseDeviceData.audioswitch = this.audioswitch;
				console.log(this.choseDeviceData, "提交的数据")
				request.POST("/system/inoutstock/syncsetting", this.choseDeviceData).then(response => {
					uni.showToast({
						title: response.message,
						icon: 'none'
					})
				})
			},
			// 获取设备编号
			getDeviceno() {
				request.GET(`/system/inoutstock/getdeviceno/${this.userInfo.advMembersId}`, null)
					   .then(response => {
						   console.log(response, "设备数据")
						   const data = response.data;
						   this.deviceList = data.map(item => {
							   return {
								   value: item.devicesno,
								   text: item.productName + '-' + item.productModel + '-' + item.devicesno
							   }
						   })
					   })
			},
			// 已购设备数据改变
			deviceChange(e) {
				this.deviceChoseValue = e;
				console.log("设备", e)
				this.getDeviceDataByDevicesno(e)
			},
			getDeviceDataByDevicesno(devicesno) {
				request.GET("/system/inoutstock/list", {
					devicesno: devicesno
				}).then(response => {
					console.log(response.rows[0], "获取到的数据");
					this.choseDeviceData = response.rows[0]
					this.brightness = this.choseDeviceData.brightness?this.choseDeviceData.brightness:0
					this.volume = this.choseDeviceData.volume?this.choseDeviceData.volume:0
					this.audioswitch = this.choseDeviceData.audioswitch?this.choseDeviceData.audioswitch:0
				})
			}
		}
	}
</script>

<style>
.status {
	padding: 20px 10px;
}
.status-body{
	display: flex;
	justify-content: space-around;
	align-items: center;
}
.progress-out {
	width: 360rpx;
	height: 40px;
}
progress {
	width: 100%;
	height: 100%;
}
.label {
	width: 100rpx;
	height: 40px;
	line-height: 40px;
	font-weight: bold;
}
.title {
	box-sizing: border-box;
	width: 700rpx;
	height: 30px;
	line-height: 30px;
	margin: 10px auto;
	border-left: 5px solid skyblue;
	padding-left: 10px;
	font-weight: bold;
}
.device-status-item {
	width: 600rpx;
	height: 30px;
	margin: 0 auto;
	line-height: 30px;
	font-weight: bold;
}
.isOnline {
	color: coral;
}
.online {
	color: springgreen;
}
.unline {
	color: orangered;
}
.have-time {
	color: springgreen;
}
.no-time {
	color: coral;
}
</style>
